<template>
  <div class="game-board">
    <GameCell
      v-for="(cell, index) in board"
      :key="index"
      :cell="cell"
      :index="index"
      @click="handleCellClick"
    />
  </div>
</template>

<script>
import GameCell from './GameCell.vue'

export default {
  name: 'GameBoard',
  components: {
    GameCell
  },
  props: {
    board: {
      type: Array,
      required: true
    }
  },
  emits: ['cell-click'],
  methods: {
    handleCellClick(index) {
      this.$emit('cell-click', index)
    }
  }
}
</script>

<style scoped>
.game-board {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  gap: 2px;
  justify-content: center;
  background: #ecf0f1;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
</style> 